<template>
  <transition name="fade">
    <div class="drawer " :class="curTheme" v-show="isShow" @click.stop="hadleSearch()">
      <div class="drawer-title">
        <ul class="drawer-ul">
          <li class="drawer-item" v-for="(item, index) in tabs" :key="index" :class="item.id == active ? 'current' : ''"
            @click="getTabItem(item)">{{ item.name }}</li>
        </ul>
        <YsDropdown trigger="click" placement="bottom-end">
          <a href="javascript:void(0)">
            <YsIcon type="md-more" size="20" class="setting" />
          </a>
          <YsDropdownMenu slot="list">
            <YsDropdownItem v-if="!checked_falg" @click.native="handleEdit(true)">编辑</YsDropdownItem>
            <YsDropdownItem v-else @click.native="handleEdit(false)">取消编辑</YsDropdownItem>
            <YsDropdownItem @click.native="handleAllEdit(1)">全部删除</YsDropdownItem>
            <YsDropdownItem @click.native="handleAllEdit(2)">全部已读</YsDropdownItem>
          </YsDropdownMenu>
        </YsDropdown>
      </div>

      <div class="drawer-body" :style="setHeight">
        <ul>
          <li v-for="(item, index) in messageInfos" :class="{ 'exitName': checked_falg }" :key="index"
            @click="setMessageDetailData(item, index)">
            <YsCheckbox class="check_box" v-if="checked_falg" v-model="item.checked"></YsCheckbox>
            <div class="prompt-header">
              <div class="circular" v-if="item.msg_read == 2"
                :class="{ red: item.msg_type == 2 && item.msg_read == 2, yellow: item.msg_type == 3 && item.msg_read == 2, blue: item.msg_type == 4 && item.msg_read == 2 }">
              </div>
              <!-- <div class="circular"  :class="{red:item.msg_type==2,yellow:item.msg_type==3,blue:item.msg_type==4}"></div> -->
              <div class="prompt-title" :style="{ marginLeft: item.msg_read == 2 ? '10px' : 0 }">{{ item.msg_title }}
              </div>
              <div class="prompt-time">{{ item.update_time }}</div>
            </div>
            <h6 class="prompt-content">{{ item.msg_title }}</h6>
            <p class="prompt-content prompt-center text_01" :class="{ 'itemAuto': item.heaghtAuto }">{{ item.msg_content
            }}
            </p>
          </li>
        </ul>
      </div>
      <div class="drawer-footer" v-if="messageInfos.length > 0">
        <div class="drawer-ty" v-if="checked_falg">
          <YsCheckbox class="check_gou" @on-change="getCheckboxFlag"></YsCheckbox>
          <YsButton size="small" @click="setdeleteData" class="toolTipItem">删除</YsButton>
          <YsButton size="small" v-if="active != 1" class="primary-btn" type="primary">已读</YsButton>
        </div>
        <div class="page" :class="{ page2: widthPage > 240 }" v-else>
          <div class="records text_01">
            共{{ page.total }}条
          </div>
          <YsPage ref="YsPageDom" @on-change="pageChange" :page-size="info_param.limit_recd"
            :current="info_param.start_recd" :total="page.total" class="pagePallion"></YsPage>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: 'new',
  data() {
    return {
      widthPage: 0,
      active: 0,
      delTag: false,
      checked_falg: false,
      info_param: {
        start_recd: 1,
        limit_recd: 50,
        msg_read: null, //消息已读：1-已读，2-未读。切记，如没有不传
      },

      page: {
        tableLoad: false,
        total: 0,
      },
      preventShow: false,
      isShow: false,
      messageInfos: [],
      tabs: [
        { id: 0, name: '全部' },
        { id: 1, name: '已读' },
        { id: 2, name: '未读' },
      ]
    }
  },
  created() {
    let _this = this
    document.body.onclick = function (e) {
      if (_this.preventShow) {
        _this.isShow = false
        _this.preventShow = false
      } else {

        _this.preventShow = true




      }
    };
  },
  computed: {
    ...mapState(['curTheme']),
    setHeight() {
      if (this.page.total > 500) {
        return { height: `calc(100% - 140px)` };
      } else {
        return { height: `calc(100% - 100px)` };
      }
    }
  },
  methods: {
    ...mapActions(['getMessageData', 'getMessageDetailData', 'getMessageDelInfo']),
    //阻止冒泡
    hadleSearch() {
      this.isShow = true
    },
    //获取服务列表 getAppUsageList
    getMessageInfo() {
      let _this = this
      _this.getMessageData(_this.info_param).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.page.total = data.all_recd

          this.messageInfos = data.messageInfos.map(v => {
            if (_this.info_param.msg_read == 1) {
              return Object.assign(v, { checked: false, heaghtAuto: false })
            } else {
              return Object.assign(v, { checked: false, heaghtAuto: false })
            }
          })
          setTimeout(() => {
            if (_this.$refs.YsPageDom) {
              _this.widthPage = _this.$refs.YsPageDom.$el.clientWidth
            }
          }, 100)
        } else {
          this.messageInfos = []
          _this.$YsMessage.error(msg);
        }
      }).catch(err => {
        _this.$YsMessage.error('获取消息失败');
      })
    },
    //切换查看那些已读
    getTabItem(item) {
      this.active = item.id
      this.info_param.msg_read = item.id ? item.id : null
      this.info_param.start_recd = 1
      this.checked_falg = false,

        this.getMessageInfo()
    },
    //切换数据
    pageChange(num) {
      this.info_param.start_recd = num
      this.getMessageInfo()
    },
    //标记已读
    setMarkRead(item) {
      let _this = this
      _this.getMessageDetailData({ id: item.id }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {

        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch(err => {
        _this.$YsMessage.error('标记失败');
      })
    },
    //编辑页面
    handleEdit(flag) {
      this.messageInfos.map(v => { return Object.assign(v, { checked: false, }) })
      this.checked_falg = flag
    },
    //全部删除或编辑
    handleAllEdit(num) {
      if (num == 1) {
        this.delTag = true
        this.setdeleteData()
      } else {

      }
    },

    // 标记为已查看
    setMessageDetailData(item, index) {
      let _this = this
      _this.getMessageDetailData({ id: item.id }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          _this.messageInfos[index].heaghtAuto = true
          _this.$parent.getMessagenumber()
          _this.$YsMessage.success('已查看详情');
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch(err => {
        _this.$YsMessage.error('标记失败');
      })
    },
    //批量删除
    setdeleteData() {
      let _this = this
      let msgIds = []
      let parmes = null
      if (this.delTag) { //全部删除
        parmes = { msg_ids: [], tag: "all" }
      } else { //部分删除
        this.messageInfos.map(v => {
          if (v.checked) {

            msgIds.push(v.id)
          }
        })
        parmes = { msg_ids: msgIds, tag: "" }
        if (msgIds.length == 0) return _this.$YsMessage.info('请勾选数据');
      }
      _this.getMessageDelInfo(parmes).then(res => {
        let { data, msg, scode, status } = res;
        _this.delTag = false

        if (status === 'ok') {
          _this.getMessageInfo()
          _this.$YsMessage.success(data.message_text);
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch(err => {
        _this.$YsMessage.error('删除失败');
      })
    },
    //设置 是否全选
    getCheckboxFlag(flag) {
      if (flag) {
        this.messageInfos.map(v => v.checked = true)
      } else {
        this.messageInfos.map(v => v.checked = false)
      }
    },

  },


}
</script>

<style scoped lang='less'>
.drawer {
  position: absolute;

  right: 0;
  bottom: 0;
  top: 56px;
  z-index: 999;
  width: 340px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid #cfd7e5;
  box-shadow: 0px 2px 8px #e1e6f0;

  .drawer-title {
    width: 100%;
    height: 56px;
    background: rgba(245, 247, 250, 1);
    padding: 0 16px;
    opacity: 1;
    border-radius: 4px 4px 0px 0px;
    display: flex;

    /deep/ .ivu-dropdown {
      margin-left: auto;
    }

    .drawer-ul {
      display: flex;

      .drawer-item {
        height: 56px;
        line-height: 56px;
        margin-right: 46px;
        cursor: pointer;
      }

      .current {
        font-weight: 600;
        color: #405680;
        border-bottom: 2px solid #405680;
      }
    }

    .setting {
      margin: 18px 0 0 auto;
    }
  }

  .drawer-body {
    overflow: auto;

    ul {
      li {
        position: relative;

        .check_box {
          position: absolute;
          left: 10px;
          top: 50%;
          z-index: 999;
        }

        padding: 16px;
        // height: 123px;
        border-bottom: 1px solid rgba(185, 194, 211, 0.2);

        &:hover {
          cursor: pointer;
          background: #ebeef5;
        }

        .prompt-header {
          display: flex;
          height: 26px;
          line-height: 26px;

          .circular {
            width: 8px;
            height: 8px;

            border-radius: 50%;
            margin-top: 9px;
          }

          .red {
            background: rgba(232, 23, 31, 1);
          }

          .yellow {
            background: rgba(222, 197, 22, 1);
          }

          .blue {
            background: rgba(7, 230, 188, 1);
          }

          .prompt-title {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 600;
            margin-left: 10px;
            color: #405680;
          }

          .prompt-time {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;

            color: #405680;
            margin-left: auto;
          }
        }

        .prompt-content {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #405680;
          opacity: 0.6;
          transition: all 0.4s;
          overflow: hidden;
          // display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示 。
          // text-overflow: ellipsis; // 可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
          // -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式 。
          // -webkit-line-clamp: 2;
        }

        .prompt-center {
          height: 45px;
        }

        .itemAuto {
          min-width: 45px;
          height: auto !important;
          -webkit-line-clamp: initial !important;
        }
      }

      .exitName {
        .prompt-content {
          margin-left: 20px;
        }
      }
    }
  }

  .drawer-footer {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 16px;
    background: #fff;

    .drawer-ty {
      display: flex;
      width: 100%;

      .check_gou {
        margin-top: 6px;
        margin-right: 0;
      }

      .primary-btn {
        margin-left: auto;
      }
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
}

.page {
  width: 100%;
  display: flex;
  align-items: center;

  .records {
    font-size: 16px;
    color: #405680;
    white-space: nowrap;
  }

  .pagePallion {
    margin-left: auto;
  }
}

.page2 {
  flex-flow: column;
  align-items: flex-start;

  .records {
    margin-bottom: 8px;
  }

  .pagePallion {
    margin-left: 0;
  }
}

.drawer.theme-blue {
  background: #2f3e59;
  border: 1px solid #566582;
  box-shadow: 0px 2px 8px #28354e;

  .drawer-body {
    .prompt-title {
      color: #7D90B2 !important;
    }

    .prompt-time {
      color: #7D90B2 !important;

    }

    .prompt-content {
      color: #7D90B2 !important;
    }

    ul li:hover {
      background: #405680 !important;
    }
  }

  .drawer-title {
    background: #364766;

    .drawer-item {
      color: #7D90B2 !important;
    }
  }

  .drawer-footer {
    background: #364766
  }
}

//
</style>